<template>
    <div>
        <van-nav-bar title="首页" />
        <van-tabs v-model:active="active">
            <van-tab title="推荐">内容 1</van-tab>
            <van-tab title="女装">内容 2</van-tab>
            <van-tab title="美食">内容 3</van-tab>
            <van-tab title="首饰">内容 4</van-tab>
            <van-tab title="珠宝">内容 5</van-tab>
            <van-tab title="鞋包">内容 6</van-tab>
            <van-tab title="房屋">内容 7</van-tab>
            <van-tab title="电子">内容 8</van-tab>
        </van-tabs>
        <van-search v-model="value" shape="round" background="#4fc08d" placeholder="请输入搜索关键词" />
        <van-swipe :autoplay="3000" lazy-render>
            <van-swipe-item v-for="image in images" :key="image">
                <img :src="image" />
            </van-swipe-item>
        </van-swipe>
        <van-tabbar v-model="active">
            <van-tabbar-item icon="home-o">首页</van-tabbar-item>
            <van-tabbar-item icon="search">分类</van-tabbar-item>
            <van-tabbar-item icon="friends-o">购物车</van-tabbar-item>
            <van-tabbar-item icon="setting-o">我的</van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script setup>

const images = [
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
];

</script>

<style lang="scss" scoped></style>